<template>
	<view>
		<view class="img"></view>
		<view class="pho">
			手机号：<u--input placeholder="请输入手机号" @blur="checkphone" border="surround" v-model="phone"></u--input>
		</view>
		<view class="pho">
			验证码：<u--input placeholder="请输入验证码" @blur="checkcode" border="surround" v-model="code"></u--input>
		</view>
		<view class="btn">
			<u-button type="primary" @click="sendmsg">{{msg}}</u-button>
		</view>
		<view class="btn">
			<u-button @click="login">登录</u-button>
		</view>
	</view>
</template>

<script>
	//引入封装好的接口
	import {
		sendSms,
		smsLogin
	} from '../../request/app.js'
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', // 验证码
				sendCode: '', //后台返回的验证码
				msg: '获取验证码',
				num: 15,
				isShow: true
			}
		},
		methods: {
			//失去焦点判断 =>手机号   一定要返回一个成功与否的状态
			checkphone() {
				//正则
				let reg = /^1\d{10}$/
				// 用正则判断手机号是否正确
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error',
						duration: 3000
					})
					//如果手机号格式不对，结束当前逻辑
					return false
				} else {
					return true
				}
			},

			//失去焦点判断 =>验证码
			checkcode() {
				// 判断空
				//判断 用户输入的验证码，和 获取到的验证码  是否一致
				if (!this.code || this.code != this.sendCode) {
					uni.showToast({
						title: '验证码不正确',
						icon: 'error',
						duration: 3000
					})
					return
				}
			},


			// 获取验证码事件
			async sendmsg() {
				// 按下获取验证码按钮，判断如果 isShow 为false，就结束逻辑，用户不可以再点击按钮 
				if (!this.isShow) return
				let a = await this.checkphone()
				// a 是检测手机号反悔的结果
				if (a) {
					// 判断本地是否存储了获取的验证码    //先判断存储中是否有值，有值就不再发送，发送也报错
					if (uni.getStorageSync('code')) {
						this.sendCode = uni.getStorageSync('code')
						this.isShow = false
						let timer = setInterval(() => {
							this.num--
							this.msg = `${this.num}s秒，可以重新获取`
							if (this.num < 1) {
								clearInterval(timer)
								this.msg = '获取验证码'
								this.isShow = true
								this.num = 15
							}
						}, 1000)
					} else {
						// 调用获取验证码接口
						sendSms({
								phone: this.phone
							})
							.then(res => {
								console.log(res, "获取验证码");
								if (res.data.code == 200) {
									this.sendCode = res.data.list.code
									//把验证码结果存储到本地
									uni.setStorageSync('code', res.data.list.code)
									this.isShow = false
									let timer = setInterval(() => {
										this.num--
										this.msg = `${this.num}s秒，可以重新获取`
										if (this.num < 1) {
											clearInterval(timer)
											this.msg = '获取验证码'
											this.isShow = true
											this.num = 15
										}
									}, 1000)
								}
							})
					}
				}
			},


			// 封装登陆事件
			login() {
				//  判断用户手机号 和 验证码 是否为空
				if (!this.phone || !this.code) {
					uni.showToast({
						title: '请输入手机号与验证码',
						icon: 'none'
					})
					return
				}
				// 判断用户输入的验证码 与 获取到的验证码是否一样
				if (this.code == this.sendCode) {
					// 调用登陆接口
					smsLogin({
							phone: this.phone
						})
						.then(res => {
							console.log(res, '登陆信息');
							// 将登陆成功，响应的数据存储在本地
							uni.setStorageSync('userinfo', res.data.list)
							// 跳转到首页
							uni.switchTab({
								url: '../mine/mine'
							})
						})
				} else {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.img {
		width: 100%;
		height: 300px;
		background-image: url('../../static/img/logo1.png');
		background-repeat: no-repeat;
		background-position: 60px 200px;
		background-size: 260px;
	}

	.pho {
		width: 340px;
		display: flex;
		align-items: baseline;
		margin: auto;
		margin-bottom: 10px;
	}

	.btn {
		width: 160px;
		margin: auto;
		margin-top: 20px;
	}
</style>
